<template>
  <roll-in-layout :current="2">
    <mt-button slot="right" @click="back">上一步</mt-button>
    <div class="form">
      <yd-cell-group>
        <!--<yd-cell-item>
          <span slot="left" class="label required">年龄：</span>
          <xf-input
            slot="right"
            :valid="[{required: true, msg: '请填写年龄'}]"
            v-model="form.name"
            ref="name"
            placeholder="请填写年龄"></xf-input>
        </yd-cell-item>-->
        <yd-cell-item>
          <span slot="left" class="label required">入党时间：</span>
          <xf-date-picker
            slot="right"
            :valid="[{required: true, msg: '请选择入党时间'}]"
            v-model="form.rddate"
            ref="rddate"
            placeholder="请选择入党时间"></xf-date-picker>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">党费交至：</span>
          <xf-date-picker
            slot="right"
            :valid="[{required: true, msg: '请选择党费交至（时间）'}]"
            v-model="form.feedate"
            ref="feedate"
            placeholder="请选择党费交至（时间）"></xf-date-picker>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">学历：</span>
          <xf-picker
            slot="right"
            :valid="[{required: true, msg: '请选择学历'}]"
            v-model="form.whcdId"
            ref="whcdId"
            :list="edu"
            placeholder="请选择学历"></xf-picker>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">毕业院校：</span>
          <xf-input
            slot="right"
            :valid="[{required: true, msg: '请填写毕业院校'}]"
            v-model="form.aac180"
            ref="aac180"
            placeholder="请填写毕业院校"></xf-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">工作形式：</span>
          <xf-picker
            slot="right"
            :valid="[{required: true, msg: '请选择工作形式'}]"
            v-model="form.workform"
            ref="workform"
            :list="workType"
            placeholder="请选择工作形式"></xf-picker>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">所学专业：</span>
          <xf-picker
            slot="right"
            :valid="[{required: true, msg: '请选择所学专业'}]"
            v-model="form.acc01g"
            ref="acc01g"
            :list="profession"
            placeholder="请选择所学专业"></xf-picker>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">QQ：</span>
          <xf-input
            slot="right"
            :valid="[{required: true, msg: '请填写QQ号'}]"
            v-model="form.expQq"
            ref="expQq"
            placeholder="请填写QQ号"></xf-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left" class="label required">出生日期：</span>
          <xf-date-picker
            slot="right"
            :valid="[{required: true, msg: '请选择出生日期'}]"
            v-model="form.personCsrq"
            ref="personCsrq"
            :end-date="new Date()"
            placeholder="请选择出生日期"></xf-date-picker>
        </yd-cell-item>
      </yd-cell-group>
      <div class="next">
        <div class="next">
          <mt-button size="large" type="primary" @click="onSubmit">下一步</mt-button>
        </div>
      </div>
    </div>
  </roll-in-layout>
</template>
<script>
  import RollInLayout from './layout.vue'
  import XfInput from '../../../components/xf-input/xf-input.vue'
  import XfDatePicker from '../../../components/xf-date-picker/xf-date-picker.vue'
  import XfPicker from '../../../components/xf-picker/xf-picker.vue'
  import {dics, getDics} from '../../../common/js/dictionaries'
  import {STORAGE_TYPE} from '../../../common/js/config'
  import {echo, parse, validate} from '../../../common/js/util'

  export default {
    components: {
      XfPicker,
      XfDatePicker,
      XfInput,
      RollInLayout},
    data() {
      return {
        form: {
          rddate: '', // 入党时间
          feedate: '', // 党费交至时间
          whcdId: '', // 学历
          aac180: '', // 毕业院校
          workform: '', // 工作形式
          acc01g: '', // 所学专业
          expQq: '', // qq号
          personCsrq: '' // 出生日期
        },
        affil: [],
        sex: [],
        nation: [],
        edu: [],
        workType: [],
        profession: [],
        canLeave: false
      }
    },
    methods: {
      getDics() {
        getDics(dics.affil, dics.sex, dics.edu, dics.workType, dics.profession, dics.nation).then(res => {
          this.affil = res[0]
          this.sex = res[1]
          this.edu = res[2]
          this.workType = res[3]
          this.profession = res[4]
          this.nation = res[5]
        })
      },
      onSubmit() {
        validate.bind(this)(this.form).then(() => {
          sessionStorage.setItem(STORAGE_TYPE.rollIn, JSON.stringify(Object.assign(this.temp, this.form)))
          this.canLeave = true
          this.$router.replace({name: 'rollIn3'})
        })
      },
      back() {
        this.canLeave = true
        this.$router.replace({name: 'rollIn1'})
      }
    },
    created() {
      this.temp = parse(sessionStorage.getItem(STORAGE_TYPE.rollIn))
      if (!this.temp) {
        this.canLeave = true
        this.$router.replace({name: 'rollIn1'})
        return
      }
      echo(this.form, this.temp)
      this.getDics()
    },
    beforeRouteLeave(to, fro, next) {
      if (this.canLeave) {
        next(true)
      } else {
        this.$message.confirm('您的业务办理尚未完成，确定离开？').then(() => {
          next(true)
        }).catch(() => {
          next(false)
        })
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "../../../common/style/variable";
</style>
